<template>
  <BasicModal v-bind="$attrs" @register="registerBomModal"  destroyOnClose :title="'物料选择'" width="80%" :minHeight="500"  @ok="handleSubmit">
      <a-row class="w-full" style="height: 500px">
        <a-col :xl="6" :lg="6" :md="10" :sm="24" style="flex: 1;">
          <a-card :bordered="false" style="height: 100%">
            <ProductCatalogTree @select="onTreeSelect" />
          </a-card>
        </a-col>
        <a-col :xl="18" :lg="18" :md="14" :sm="24" style="flex: 1;">
          <a-card :bordered="false" style="height: 100%">
            <BasicTable @register="registerTable" :rowSelection="rowSelection">
            </BasicTable>
          </a-card>
        </a-col>
      </a-row>
  </BasicModal>
</template>

<script lang="ts" setup>
  import {ref, reactive, computed, unref} from 'vue';
  import {BasicTable} from '/@/components/Table';
  import {BasicModal, useModalInner} from '/@/components/Modal';
  import { useListPage } from '/@/hooks/system/useListPage'
  import {columns, searchFormSchema} from '../WmItem.data';
  import {list,bomSaveOrUpdate} from '../WmItem.api';
  import { useUserStore } from '/@/store/modules/user';
  import ProductCatalogTree from "@/views/wmhb/item/components/ProductCatalogTree.vue";
  const queryParam = reactive<any>({});
  const checkedKeys = ref<Array<string | number>>([]);
  const userStore = useUserStore();
  const emit = defineEmits(['register','success']);
  const props = defineProps({
    itemId:{type:String}
  })
  //注册model
  const [registerBomModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
    setModalProps({confirmLoading: false,showCancelBtn:true,showOkBtn:true});
  })
  //注册table数据
  const {tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: '物料产品表',
           api: list,
           columns,
           canResize:false,
           showActionColumn:false,
           formConfig: {
              //labelWidth: 120,
              schemas: searchFormSchema,
              autoSubmitOnEnter:true,
              showAdvancedButton:true,
              fieldMapToNumber: [
              ],
              fieldMapToTime: [
              ],
            },
           actionColumn: {
               width: 120,
               fixed:'right'
            },
            beforeFetch: (params) => {
              return Object.assign(params, queryParam);
            },
      }
  })

  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext


    // 左侧树选择后触发
  function onTreeSelect(data) {
    queryParam.wmItemTypeId=data.key
    reload()
  }

  async function handleSubmit(){
    for (let bomId of selectedRowKeys.value){
      const params = {
        bomItemId:bomId,
        wmItemId:props.itemId
      }
      await bomSaveOrUpdate(params,false)
    }
    closeModal()
    emit('success');
  }

</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
  :deep(.ant-card .ant-card-body){
    padding: 5px;
  }
</style>
